<template>
  <div class="product-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-text">Loading...</div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="!hasProducts && !loadMoreLoading" class="empty-container">
      <img src="@/assets/common/empty.png" style="width: 64px; height: 64px" />
      <p>Warrior, come and join the competition now!</p>
    </div>

    <!-- 瀑布流图片列表 -->
    <WaterfallFlex :items="products" v-else>
      <template #default="{ item: product, width }">
        <FeedCard :product="product" :width="width" />
      </template>
    </WaterfallFlex>

    <!-- 加载更多状态（移出瀑布流容器，跟随文档流，显示在内容之后） -->
    <div v-if="loadMoreLoading" class="load-more-container">
      <div class="load-more-spinner">
        <svg
          class="animate-spin"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <circle
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            stroke-width="4"
            stroke-dasharray="31.416"
            stroke-dashoffset="31.416">
            <animate
              attributeName="stroke-dasharray"
              dur="2s"
              values="0 31.416;15.708 15.708;0 31.416"
              repeatCount="indefinite" />
            <animate
              attributeName="stroke-dashoffset"
              dur="2s"
              values="0;-15.708;-31.416"
              repeatCount="indefinite" />
          </circle>
        </svg>
        <span class="load-more-text">Loading more...</span>
      </div>
    </div>

    <!-- 没有更多数据提示（移出瀑布流容器，显示在内容末尾） -->
    <div
      v-else-if="!hasMore && products.length > 10 && !loading && !loadMoreLoading"
      class="no-more-container">
      <div class="no-more-text">
        <div class="lline"></div>
        <div>No more</div>
        <div class="lline"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import type { FeedItem } from '@/api/feeds';
  import WaterfallFlex from '@/components/waterfall/WaterfallFlex.vue';
  import FeedCard from '@/components/feed/FeedCard.vue';

  interface Props {
    products: FeedItem[];
    loading?: boolean;
    loadMoreLoading?: boolean;
    hasMore?: boolean;
  }

  const props = withDefaults(defineProps<Props>(), {
    products: () => [],
    loading: false,
    loadMoreLoading: false,
    hasMore: true,
  });

  // 计算属性
  const hasProducts = computed(() => props.products && props.products.length > 0);
</script>

<style lang="scss" scoped>
  @use '@/styles/variables' as *;

  .product-container {
    padding: 24px;
    position: relative;
    padding-bottom: 50px;
  }

  @keyframes spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  .loading-text {
    font-size: 16px;
    color: #7a7a7a;
  }

  .empty-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    p {
      margin-top: 16px;
      color: #7a7a7a;
      text-align: center;
      font-size: 16px;
    }
  }

  .empty-text {
    font-size: 16px;
    color: #7a7a7a;
  }

  .load-more-container {
    position: static; // 跟随文档流
    display: flex;
    justify-content: center;
    padding: 24px 0;
  }

  .load-more-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #666;
    font-size: 14px;

    font-weight: 500;
  }

  .load-more-text {
    white-space: nowrap;
  }

  .no-more-container {
    position: static; // 跟随文档流
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 32px;
  }

  .no-more-text {
    padding: 12px 24px;
    color: #7a7a7a;
    font-size: 14px;

    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .lline {
    width: 60px;
    height: 1px;
    border-radius: 5px;
    background-color: #e1e2e3;
  }
</style>
